<!-- <template>
  <div class="main">


  <el-button type="primary" >添加分类</el-button>


      <el-table :data="cateList" style="width: 100%;       margin-top:20px;">
      <el-table-column prop="cat_name" label="分类名称" />
      <el-table-column  label="是否有效"  >
        <el-tag type="success">有效</el-tag>
      </el-table-column>
      <el-table-column  label="排序" >
         <el-tag color = "#F9F0FF">一级</el-tag>
      </el-table-column>



      <el-table-column label="操作">
        <el-button size="small" type="primary">
          <el-icon>
            <Edit />编辑
          </el-icon>
        </el-button>
        <el-button size="small" type="danger">
          <el-icon>
            <DeleteFilled />删除
          </el-icon>
        </el-button>
      </el-table-column>

    </el-table>

  </div>
</template>

<script setup>
import { ref } from "vue";
import { goodsclassify } from '../../api/user.js'


let pagenum = ref(1);
let pagesize = ref(10);
let cateList = ref([])
let data = {
  pagenum: pagenum.value,
  pagesize: pagesize.value
}


let getGoodCate = async () => {
  let res = await goodsclassify(data);
  console.log(res);
  cateList.value = res.data.data.result;
  console.log(cateList);
}
getGoodCate()





</script>


<style>
.main {
  padding: 0px 20px
}
</style> -->


<template>
  <div class="cate">
    <el-button type="primary" class="btn">添加分类</el-button>

    <div class="list">
      <el-table
        :data="tableData.slice(start, end)"
        style="width: 100%; margin-bottom: 20px"
        row-key="cat_id"
        border
        @expand-change="getRow"
      >
        <el-table-column prop="cat_name" label="分类名称" width="180" />

        <el-table-column label="是否有效">
          <template #default>
            <el-tag class="ml-2" type="success">有效</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="排序">
          <template #default="scope">
            <el-tag
              class="ml-2"
              color="#f9f0ff"
              v-if="scope.row.cat_level == 0"
            >
              <span class="tag1">一级</span>
            </el-tag>
            <el-tag class="ml-2" type="success" color="#e6f7ff" v-if="scope.row.cat_level == 1">
              <span class="tag2">二级</span>
            </el-tag>
            <el-tag
              class="ml-2"
              color="#e6fffb"
              v-if="scope.row.cat_level == 2"
            >
              <span class="tag3">三级</span>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default>
            <el-button type="primary">编辑</el-button>
            <el-button type="danger" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部按钮 -->
    <div class="pagination">
      <div></div>
      <div>
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="btnChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { goodsclassify } from '../../api/user.js'
let tableData = ref([]);
let total = ref(1);

let getList = async () => {
  let res = await goodsclassify();
  tableData.value = res.data.data;
  console.log(tableData.value);
  total.value = res.data.data.length;
};
getList();

let start = ref(0);
let end = ref(10);
let btnChange = (val) => {
  switch (val) {
    case 1:
      start.value = 0;
      end.value = val * 10;
      break;

    case 2:
      start.value = 10;
      end.value = val * 10;
      break;
    case 3:
      start.value = 20;
      end.value = val * 10;
      break;
  }
};

// 测试

let getRow = (expandedRows) => {
  console.log(expandedRows);
};
</script>

<style scoped>
.cate {
  width: 100%;
}
.btn {
  margin: 10px;
}
.tag1 {
  color: #6c1dac;
}
.tag3 {
  color: #3299aa;
}
.pagination {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>